<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 12px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down" /></span>
            <span v-else>收起<a-icon type="up" /></span>
          </a-button>
        </div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_flex">
            <div class="mode_item_div">
              <a-form-model-item label="申请时间">
                <!-- <a-range-picker
                  :allowClear="true"
                  v-model="rangePickerTime"
                  valueFormat="YYYY-MM-DD"
                  @change="rangePickerChange"
                /> -->
                <span class="date-range-picker">
                  <a-date-picker
                    v-model="form.applyStartTime"
                    placeholder="开始日期"
                    :disabled-date="disabledStartDate"
                    valueFormat="YYYY-MM-DD"
                    @openChange="handleOpenChange($event, 'start')"
                  />
                  <span class="line">-</span>
                  <a-date-picker
                    v-model="form.applyEndTime"
                    placeholder="结束日期"
                    :disabled-date="disabledEndDate"
                    valueFormat="YYYY-MM-DD"
                    :open="endOpen"
                    @openChange="handleOpenChange($event, 'end')"
                  />
                </span>
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="用户名">
                <a-input v-model.trim="form.realname" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="申请状态">
                <j-search-select-tag
                  placeholder="请选择"
                  v-model="form.status"
                  :dictOptions="smsDissuadeStatusOptions"
                />
              </a-form-model-item>
            </div>
          </div>
          <div class="mode_item mode_item_flex" v-show="show">
            <div class="mode_item_div">
              <a-form-model-item label="工号/警号">
                <a-input v-model="form.workNo" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="手机号">
                <a-input v-model="form.phone" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="部门">
                <a-input v-model.trim="form.departName" placeholder="请输入" />
              </a-form-model-item>
            </div>
          </div>
          <div style="width: 36%; margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <!-- record.status 等于2为已办理，已办理后就不能再办理 -->
            <a-button :disabled="record.status==2" @click="handleChange(record)" type="link" style="padding: 0">办理</a-button>
          </template>
        </custom-table>
      </div>
    </a-card>
    <user-modal ref="modalForm" @ok="modalFormOk" @rolesOptions="getRolesOptions" />
  </div>
</template>

<script>
import * as appAdminApi from '@/api/modules/appAdmin.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import UserModal from './modules/UserModal'

export default {
  components: {
    CustomTable,
    UserModal,
  },
  data() {
    return {
      endOpen: false,
      loading: false,
      show: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      form: {},
      rangePickerTime: [],
      smsDissuadeStatusOptions: [
        { text: '全部', value: '' },
        { text: '未办理', value: '1' },
        { text: '已办理', value: '2' },
      ],
      rolesOptions: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 50,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '用户名',
          dataIndex: 'realname',
          width: 100,
          align: 'center',
        },
        {
          title: '工号/警号',
          dataIndex: 'workNo',
          width: 100,
          align: 'center',
          customRender: (text, record) => {
            return <j-ellipsis value={text} length={100} />
          },
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 100,
          align: 'center',
        },
        {
          title: '部门',
          dataIndex: 'departName',
          width: 100,
          align: 'center',
        },
        {
          title: '角色',
          dataIndex: 'roleId',
          width: 100,
          align: 'center',
          customRender: (text, record)=>{
            return this.$filterDictText(this.rolesOptions, text)
          }
        },
        {
          title: '申请时间',
          dataIndex: 'createTime',
          width: 100,
          align: 'center',
        },
        {
          title: '申请状态',
          dataIndex: 'status',
          width: 100,
          align: 'center',
          customRender: (text, record) => {
            return (
              <span style={{ color: text == 1 ? '#f30000' : '' }}>
                {' '}
                {text == 1 ? '未办理' : text == 2 ? '已办理' : ''}
              </span>
            )
          },
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let obj = JSON.parse(JSON.stringify(this.form))
      if(obj && Object.keys(obj).length>0) {
        if(obj.status) obj.status = Number(obj.status)
        if(obj.departName) obj.departName = '*'+obj.departName+'*'
      }
      let form = Object.assign({}, obj, this.pageFilter)
      this.loading = true
      appAdminApi
        .getRegisterApplyList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 申请时间
    rangePickerChange(date) {
      this.$set(this.form, 'applyStartTime', date[0])
      this.$set(this.form, 'applyEndTime', date[1])
    },
    handleChange: function (record) {
      this.$refs.modalForm.handle(record)
      this.$refs.modalForm.title = '办理'
      this.$refs.modalForm.disableSubmit = false
    },
    //办理成功
    modalFormOk() {
      this.refreshTable()
    },
    //接收角色列表
    getRolesOptions(datas) {
      this.rolesOptions = datas
    },
    // 发送时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.form).length > 0 && this.form.applyEndTime
        ? this.$JMoment(this.form.applyEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 发送时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.form).length > 0 && this.form.applyStartTime
      ? this.$JMoment(this.form.applyStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 发送时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    }
  }
}
</script>
<style lang="less" scoped>
.form-item-label {
  /deep/.ant-form-item-label {
    width: 80px;
  }
}
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  .mode_item_div {
    width: 30%;
    padding: 5px 0;
    .ant-form-item {
      margin-bottom: 0;
    }
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 100;
}
/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  /deep/.ant-btn {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>